<template>
  <view class="make-content">
    <view class="make-list">
      <view class="make-item" v-for="item in props.listData" :key="item.id">
        <view class="make-item-left">
          <!-- <image class="make-item-avatar" :src="item.photo" /> -->
          <up-avatar size="120rpx" :src="item.photo"></up-avatar>
        </view>
        <view class="make-item-right">
          <view class="make-item-title">{{ item.name }}</view>
          <view class="make-item-tips">
            <text
              class="make-tips"
              v-for="label in item.workLabel"
              :key="label"
              >{{ label }}</text
            >
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script setup>
import { reactive, ref } from "vue";

import Bg1 from "../../static/image/bg-1.png";
import Bg2 from "../../static/image/bg-2.png";

const props = defineProps({
  listData: {
    type: Array,
    default: () => [],
  },
});

let tips = ref(["100%实名认证", "专业培训", "百万保险", "高效管理"]);
let state = reactive({
  makeList: [
    {
      id: 1,
      title: "住院护理",
      isClass: "make-main-item-blue",
      tips: ["术后陪护", "专病照护", "重症看护"],
      bg: Bg1,
    },
    {
      id: 2,
      title: "居家陪护",
      isClass: "make-main-item-yellow",
      tips: ["高龄护理", "长期陪护", "生活看护"],
      bg: Bg2,
    },
  ],
});

const predetermine = (item) => {
  uni.navigateTo({
    url: "/pages/predetermine/index?types=" + item.id,
  });
};
</script>
  
  <style lang="scss" scoped>
.services-main-make {
  padding-bottom: 20rpx;
}
.make-content {
  .make-item {
    display: flex;
    margin-top: 20rpx;
    padding: 20rpx;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
  }
  .make-item-left {
    width: 120rpx;
    height: 120rpx;
    border: 8rpx solid #2cdeb4;
    border-radius: 120rpx;
    flex: none;
    .make-item-avatar {
      width: 120rpx;
      height: 120rpx;
    }
  }
  .make-item-right {
    margin-left: 10px;
    .make-item-title {
      padding-top: 10rpx;
      font-size: 36rpx;
      line-height: 1;
    }
    .make-item-tips {
      display: flex;
      flex-wrap: wrap;
      .make-tips {
        flex: none;
        background: #daf1ff;
        color: #2cdeb4;
        font-size: 28rpx;
        padding: 0 20rpx;
        display: block;
        line-height: 2;
        border-radius: 50rpx;
        margin-top: 20rpx;
        margin-right: 20rpx;
      }
    }
  }
}
</style>
  